<template>
	<view :data-theme="theme" class="container">
		<view class="header" style="flex: 0 0 auto;">
			<view class="card" style="position: fiexd;top: 0;left: 0;display: flex;">
				<u--image :showLoading="true" :src="data.image" width="80px" height="80px"></u--image>
				<view style="display: flex;flex-flow: column;flex: 1;margin: 6px 6px 0 6px;">
					<text class="card-title"><span v-if="data.brandName">[{{data.brandName}}]</span>{{data.name}}</text>
					<u--text v-if="data.specParam" :text="data.specParam" :size="16"
						style="margin: 10rpx 0;padding-bottom: 10rpx;"></u--text>
					<u--text v-if="data.skuName" :text="data.skuName" :size="16"
						style="margin: 10rpx 0;padding-bottom: 10rpx;"></u--text>
				</view>
			</view>
			<!-- <view style="margin: 0 20rpx;">
				<u-tabs :list="tabsData" :activeStyle="{color:bgColor}" :lineColor="bgColor" @click="click"></u-tabs>
			</view> -->
		</view>
		<scroll-view scroll-y="true" :style="{ 'padding-bottom':'20rpx' }" style="height: 100%; overflow: hidden;">
			<view class="card">
				<view class="card-title">
					<p>预售库存</p>
				</view>
				<view v-for="(item,index) in depotData"
					style="background-color: #f5f5f5;border-radius: 10px;padding: 20rpx;margin-bottom: 20rpx;">
					<view class="demo-uni-row">
						<view class="demo-uni-col dark" style="font-weight: bold;">{{item.depotName}}</view>
					</view>
					<view class="demo-uni-row"
						style="display: flex;justify-content: space-between;align-items: center;">
						<view class="demo-uni-col dark" style="flex: 1;">库存模式</view>

						<view class="sku-select1" style="flex: 3;">
							<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
								<view class="flex-text" :class='ele.id == item.inventoryModel?"right-class-active":""'
									v-for="(ele,index1) in skuArr2" :key="index1" @click='tapAttr2(ele,item,index)'>
									{{ele.sku}}
								</view>
							</view>
						</view>
					</view>
					<view class="demo-uni-row" style="display: flex;flex-direction: row;align-items: center;">
						<view class="demo-uni-col dark" style="flex: 1;">库存总数</view>
						<view style="display: flex;flex: 3;align-items: center;">
							<view style="flex: 2;">
								<input type="number" v-model.trim="item.totalInventory" :min="0"
									style="border: 2rpx solid #e3e3e3;background-color: #f5f5f5;width: 170rpx;height: 60rpx;border-radius: 10rpx;text-align: left;padding-left: 20rpx;"
									placeholder="库存总数" @blur="blur(item,index)" />
							</view>
							<view style="font-size: 24rpx;flex: 3;margin-left: 30rpx;">
								<text style="color: #a5a5a5;">每日自动恢复,</text><text class="main_color">销量参考</text>
							</view>
						</view>
					</view>
					<view class="demo-uni-row" style="display: flex;flex-direction: row;margin-top: 50rpx;">
						<view class="demo-uni-col dark" style="flex: 1;">今日已售</view>
						<view class="demo-uni-col dark" style="flex: 3;">
							{{item.soldInventory ? item.soldInventory : ''}}
						</view>
					</view>
				</view>
			</view>
			<view style="height: 120rpx;"></view>
		</scroll-view>


		<view class="footer">
			<button class="bg_color" size="large" @click="updateButton">保存</button>
		</view>

	</view>
</template>

<script>
	import UniSection from '@/components/uni/uni-swipe-action/uni-swipe-action.vue';
	// import UniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue'
	import {
		businessAppModifyGoodsAndDepotApi,
		businessAppQueryCommodityRegionalPriceSKUApi,
		businessQueryGoodsAndDepotApi,
		businessQueryGoodsAndDepotInfoApi
	} from '@/api/goodsAndDepot.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			'uni-section': UniSection,
			// 'uni-number-box': UniNumberBox,
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				data: {},
				// tabsData: [], // tabs 列表
				depotData: [], //数据列表
				skuArr2: [{
					sku: "每日恢复初始库存",
					id: '1'
				}, {
					sku: "售完即止",
					id: '2'
				}],
				attrValue2: {
					sku: '售完即止'
				},
				productSku: {
					sku: '',
					current: 1,
					size: 10,
				}, //sku查询
				sku: '',
				oldDepotData: [], // old数据列表原始,作对比
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.data = JSON.parse(options.item);
			if (this.data.showOrNot) {
				this.productSku.sku = this.data.skuId;
				this.getAndDepotInfo(); //在商品管理跳转过来
			} else {
				this.oldDepotData = JSON.parse(JSON.stringify(this.data.twoList)) //old 数据
				this.depotData = this.data.twoList; //库存管理页面跳转
			}
		},
		methods: {
			getBusinessDepot() {
				businessQueryGoodsAndDepotApi(this.productSku).then((res) => {
					if (res.data.records[0]) {
						this.depotData = res.data.records[0].twoList;
					} else {
						this.depotData = [];
					}
				})
			},
			//输入框失去焦点
			blur(res, index) {
				if (parseInt(res.totalInventory) < 0) {
					this.depotData[index].totalInventory = 0;
				}
				if (this.depotData[index].totalInventory == '') {
					this.depotData[index].totalInventory = 0;
				}
			},
			//库存模式 改变
			tapAttr2(skuItem, item, index) {
				this.attrValue2 = skuItem;
				// this.depotData[index].inventoryModel = skuItem.id;
				this.$set(this.depotData[index], 'inventoryModel', skuItem.id)
			},

			/** 页面跳转过来后，修改库存 */
			getAndDepotInfo() {
				businessQueryGoodsAndDepotInfoApi({
					sku: this.productSku.sku
				}).then((res) => {
					this.oldDepotData = JSON.parse(JSON.stringify(res.data)); //深拷贝数据，用于最后提交保存的数据对比
					this.depotData = res.data;
				})
			},

			/** 
			保存提交
			 */
			updateButton() {
				const differentObjects = this.depotData.filter((obj, index) => {
					return (obj.totalInventory != this.oldDepotData[index].totalInventory ||
						obj.inventoryModel != this.oldDepotData[index].inventoryModel)
				}); //数组对比

				// let newDepotData = this.depotData.map(({
				let newDepotData = differentObjects.map(({
					depotId,
					id,
					inventoryModel,
					totalInventory
				}) => ({
					depotId,
					id,
					inventoryModel,
					totalInventory,
					sku: `${this.productSku.sku}`
				})) //获取相应属性值
				let newData = newDepotData.map(obj => ({
					...obj,
					inventoryModel: parseInt(obj.inventoryModel),
					totalInventory: parseInt(obj.totalInventory),
					sku: parseInt(obj.sku)
				})); //转为数字
				if (newData.length > 0) {
					businessAppModifyGoodsAndDepotApi(newData).then((res) => {
						this.code = res.code;
						if (this.code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000 // 持续时间为 2 秒
							});
						} else {
							uni.showToast({
								title: '修改失败',
								icon: 'error',
								duration: 2000 // 持续时间为 2 秒
							});
						}
					});
				};
				const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
				uni.navigateBack({
					delta: 1,
					success: (res) => {
						uni.$emit('shopMessageoTherFun'); // 通过事件总线传递数据给上一个页面
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	page {
		display: flex;
		height: 100%;
		flex-direction: column;
		overflow: hidden;

		.container {
			display: flex;
			height: 100%;
			flex-direction: column;
			overflow: hidden;
		}
	}

	.card {
		margin: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.card-title {
		font-size: 34rpx;
		font-weight: bold;
		padding: 26rpx 6rpx;
	}

	.demo-uni-row {
		font-size: 32rpx;
		margin: 20rpx 0;
		// padding: 20rpx 20rpx;
	}

	.sku-select1 {
		.flex-text {
			margin: 8rpx 8rpx;
			background-color: #fff;
			line-height: 62rpx;
			text-align: center;
			color: #777;
			padding: 0 20rpx;
			font-size: 24rpx;
			border-radius: 12rpx;
			border: 2rpx solid #dddddd;
		}

		.right-class-active {
			@include main_color(theme);
			@include main_bg_rgba_color(theme, 0.05);
			border: 2rpx solid;
		}
	}

	.demo-uni-col {
		font-size: 30rpx;
	}

	.footer {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		padding: 10px;
		background-color: #fff;
	}

	.footer>button {
		line-height: 92rpx;
		font-weight: bold;
		border-radius: 20rpx;
		text-align: center;
		color: #fff;
	}
</style>